<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.min.css">



    <!-- Custom styles for this template -->
    <link href="/public/css/dashboard.css" rel="stylesheet">



</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Dashboard</a></li>
                    <li><a href="#">Settings</a></li>
                    <li><a href="#">Profile</a></li>
                    <li><a href="#">Help</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search...">
                </form>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Reports</a></li>
                    <li><a href="#">Analytics</a></li>
                    <li><a href="#">Export</a></li>
                </ul>
                <ul class="nav nav-sidebar">
                    <li><a href="">Nav item</a></li>
                    <li><a href="">Nav item again</a></li>
                    <li><a href="">One more nav</a></li>
                    <li><a href="">Another nav item</a></li>
                    <li><a href="">More navigation</a></li>
                </ul>
                <ul class="nav nav-sidebar">
                    <li><a href="">Nav item again</a></li>
                    <li><a href="">One more nav</a></li>
                    <li><a href="">Another nav item</a></li>
                </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">


                <h2 class="sub-header">化学物质查询</h2>

                <form id="search_form">

                    <div class="form-group">
                        <label for="">化学式</label>
                        <input type="text" class="form-control" id="" name="name">
                    </div>

                    <button type="submit" class="btn btn-default">Submit</button>
                    <div class="table-responsive">
                        <table class="table table-striped">

                            {{each records}}
                            <tr>
                                <td>{{$value.keys}}</td>
                                <td>{{$value.length}}</td>
                                <td>{{$value._fields}}</td>
                                <td>{{$value._fieldLookup}}</td>
                            </tr>
                            {{/each}}

                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <svg></svg>
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/d3/dist/d3.min.js"></script>
    <script>
        $('#search_form').on('submit', function (e) {
            e.preventDefault()
            var formData = $(this).serialize()
            console.log(formData)
            $.ajax({
                url: '/test',
                type: 'post',
                data: formData,
                dataType: 'json',
                success: function () {
                    //get json file
                    d3.json('/public/json/output.json').then(function (dataJson) {
                        console.log(dataJson)
                        console.log('------------------')
                        //GroupExplorer constructing function
                        //this is one way to create a javascript object
                        function GroupExplorer(data) {
                            //create an object-include some data
                            //this is an another way to create a javascript object
                            var defaultConfig = {
                                data: { "nodes": [], "links": [] },//critical data set
                                windowWidth: window.innerWidth,
                                windowHeight: window.innerHeight,
                                defaultLinkDistance: 150
                            }
                            //because the initial "data" is null,
                            //so you need use jquery syntax "extend" to merge the json data
                            //below,merge "data" into "defaultWindow"
                            //"true" mean do not cover
                            //details see jquery API document
                            $.extend(true, defaultConfig, data);
                            //so now we get the json file that we need
                            //now let`s begin,transform json file to force graph data
                            //but first ,we need to get "svg"
                            var svg = d3.select("svg");
                            svg.attr("width", defaultConfig.windowWidth);
                            svg.attr("height", defaultConfig.windowHeight);
                            defaultConfig.data.links.forEach(function (e) {
                                if (typeof e.source == "number" && typeof e.target == "number") {
                                    var sourceNode = defaultConfig.data.nodes.filter(function (n) {
                                        return n.id === e.source;
                                    })[0];
                                    var targetNode = defaultConfig.data.nodes.filter(function (n) {
                                        return n.id === e.target;
                                    })[0];
                                    e.source = sourceNode;
                                    e.target = targetNode;
                                }
                            });
                            //create a force graph
                            var forceSimulation = d3.forceSimulation()
                                .force("link", d3.forceLink())
                                .force("charge", d3.forceManyBody())
                                .force("center", d3.forceCenter(defaultConfig.windowWidth / 2, defaultConfig.windowHeight / 2));
                            //transform nodes data
                            forceSimulation.nodes(defaultConfig.data.nodes)
                                .on("tick", ticked);
                            //tranform links data
                            forceSimulation.force("link")
                                .links(defaultConfig.data.links)
                                .distance(defaultConfig.defaultLinkDistance);
                          
                            //define arrow
                            svg.append("svg:defs")
                                .append("svg:marker")
                                .attr("id", "marker")
                                .attr('viewBox', '0 -5 10 10')
                                .attr("refX", 20)
                                .attr("refY", 0)
                                .attr('markerWidth', 10)
                                .attr('markerHeight', 10)
                                .attr('orient', 'auto')
                                .append('svg:path')
                                .attr('d', 'M0,-5L10,0L0,5')
                                .attr("fill", "brown");
                            //draw links
                            var links = svg.append("g")
                                .selectAll("line")
                                .data(defaultConfig.data.links)
                                .enter()
                                .append("line")
                                .attr("x1", function (n) { return n.source.x })
                                .attr("y1", function (n) { return n.source.y })
                                .attr("x2", function (n) { return n.target.x })
                                .attr("y2", function (n) { return n.target.y })
                                .attr("stroke", "brown")
                                .attr("stroke-width", 1)
                                .attr("marker-end", "url(#marker)");
                            //draw links-text
                            var links_text = svg.append("g")
                                .selectAll("text")
                                .data(defaultConfig.data.links)
                                .enter()
                                .append("text")
                                .attr("x", function (e) {
                                    return (e.source.x + e.target.x) / 2;
                                })
                                .attr("y", function (e) {
                                    console.log(e.source.y + "+" + e.target.y)
                                    return (e.source.y + e.target.y) / 2;
                                })
                                .attr("font-size", 10)
                                .text(function (e) { return e.type });
                            //draw nodes group = node+node-text
                            var nodes_g = svg.append("g")
                                .selectAll("g")
                                .data(defaultConfig.data.nodes)
                                .enter()
                                .append("g")
                                .attr("transform", function (e) {
                                    return "translate(" + e.x + "," + e.y + ")";
                                })
                                .call(d3.drag()
                                    .on("start", started)
                                    .on("drag", dragged)
                                    .on("end", ended));
                            //draw nodes
                            nodes_g.append("circle")
                                .attr("r", 10)
                                .attr("fill", "blue");
                            //draw node-text
                            nodes_g.append("text")
                                .attr("x", -15)
                                .attr("y", 20)
                                .attr("font-size", 10)
                                .text(function (e) { return e.name });
                            function started(d) {
                                if (!d3.event.active) {
                                    forceSimulation.alphaTarget(0.8).restart();
                                }
                                d.fx = d.x;
                                d.fy = d.y;
                            }
                            function dragged(d) {
                                d.fx = d3.event.x;
                                d.fy = d3.event.y;
                            }
                            function ended(d) {
                                if (!d3.event.active) {
                                    forceSimulation.alphaTarget(0);
                                }
                                d.fx = null;
                                d.fy = null;
                            }
                            function ticked() {
                                links
                                    .attr("x1", function (n) { return n.source.x })
                                    .attr("y1", function (n) { return n.source.y })
                                    .attr("x2", function (n) { return n.target.x })
                                    .attr("y2", function (n) { return n.target.y })
                                links_text
                                    .attr("x", function (e) {
                                        return (e.source.x + e.target.x) / 2;
                                    })
                                    .attr("y", function (e) {
                                        return (e.source.y + e.target.y) / 2;
                                    })
                                nodes_g
                                    .attr("transform", function (e) {
                                        return "translate(" + e.x + "," + e.y + ")";
                                    })
                            }
                        }
                        //because in the way of creating a javascript object,
                        //you need to use "new" to use it
                        new GroupExplorer({ data: dataJson });
                    })
                }
            })
        })
    </script>


</body>

</html>